// 柱体设置
import React from 'react';
import FormItem from 'antd/lib/form/FormItem';
import { InputNumber } from 'antd';
import { filterObjectNullKeys } from 'src/libs/utils';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}


const ColumnSetting = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;
	const onBlur = () => {
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};
	return (
		<div>
			<FormItem label="最大宽度" name="columnWidth" labelAlign="left" labelCol={{ span: 15 }} wrapperCol={{ span: 9 }}>
				<InputNumber onBlur={onBlur} onPressEnter={onBlur} style={{ width: '100%' }} placeholder="" />
			</FormItem>
			<FormItem label="不同分组柱体间距(0-1)" name="columnMargin" labelAlign="left" labelCol={{ span: 15 }} wrapperCol={{ span: 9 }}>
				<InputNumber onBlur={onBlur} onPressEnter={onBlur} style={{ width: '100%' }} max={1} min={0} placeholder="" />
			</FormItem>
			<FormItem label="圆角" name="columnRadio" labelAlign="left" labelCol={{ span: 15 }} wrapperCol={{ span: 9 }}>
				<InputNumber onBlur={onBlur} onPressEnter={onBlur} style={{ width: '100%' }} placeholder="" />
			</FormItem>
		</div>
	);
};

export default React.memo( ColumnSetting );
